<template>
    <div  class="jx-content">
		<!-- 暂无数据:class = "(PreviewCourse == '' ||  PreviewCourse == null) && (ContentList == '' || ContentList == null) ? xianshi : yincang" -->
		<!-- 判断课程体系没有length长度的时候，，就显示组织课程体系 -->
		<div class="empty-systerm" v-if = "PreviewCourse.length == '' || addressee.length == ''">
			<button class="button-style fr" @click = "CurriculumOnclick"  v-if="this.roleId == 'TEACHER' || this.roleId == 'MARKET_TEACHER' ||  this.roleId == 'UNIVERSITY_TEACHER'">组织课程体系</button>
			<div class="empty-systerm-img" v-if="this.roleId == 'TEACHER' || this.roleId == 'MARKET_TEACHER' ||  this.roleId == 'UNIVERSITY_TEACHER'">
				<img src="../../../assets/images/syetrems.png"/>
			</div>
			<div class="student-empty-systerm-img" v-else>
				<img src="../../../assets/images/index_no_data.png"/>
				<p style = "line-height: 40px; color: #999999; font-size:15px; opacity: 0.9;">暂无内容</p>
			</div>
		</div>
		<!-- 春野 -->
		<!-------------------- 靳春野负责的块开始  --------------------->
		<!-- v-else的意思是否则课程体系有数据，显示课程体系内容 new的值是调整相对定位，调整层级-->
		<div class="systemListShow new" v-else @click="clickEvent">
		<!-- 右上角按钮，组织课程体系 -->
		<button class="CurriculumOnclick fr" @click = "CurriculumOnclick" style = "z-index:999"   v-if="this.roleId == 'TEACHER' || this.roleId == 'MARKET_TEACHER' ||  this.roleId == 'UNIVERSITY_TEACHER'">组织课程体系</button>
			<div id = "Curriculum-system">
				<!-- 在后台没有传过来任何数据的时候，显示暂无数据，但凡有一点数据，都会显示数据 -->
				<!-- 工作岗位后台最多传输三层，如果超过层的数据，就会影响到课程体系飞机格的样式 -->
				<!-- 工作岗位开始 -->
				<div id = "coursetab">
					<div class = "container">
						<ul>
							<!-- v-clickDown是在页面开始的时候就先把自动索引点击第一个 -->
							<!-- v-clickDown = "index" -->
							<!-- {{ PreviewCourse[1].hasWork }}  -->
							<li class = "tab-contentGlide"
								v-for = "(item,index) in ContentList"
								v-if = "item == '' ? false : true"
								:class = "{ 'active' : index == currenindex && !item.isCheck}"
								@click = "clickHander(index, item.id, item.isCheck,item.hasWork)"
								:key = "index"
								@click.stop
							>
								<!-- :class = "{'tabcontent': index == currenindex}" -->
								{{ item.name | ellipsistow}}
							</li>
						</ul>
					</div>
				</div>
				<!-- 课程体系开始 -->
				<!-- @click="clickEvent"是————当课程章节展开的的时候点击空白部分课程章节收回效果 -->
				<div class = "preview-course" >
					<ul class = "semester-ul">
						<!-- 开始学期循环 -->
						<li class = "semester-li"
							v-for = "(item,index) in PreviewCourse"
							:key = "item.id">
							<!-- 学期内容 -->
							<div class = "semester-span">
								<p class = "semester-span-p">
								<img src = "../../../assets/images/semester-logo.png" />
								<span>{{ item.name }}</span>
								</p>
							</div>
							<!-- 开始课程章节循环 -->
							<ul class = "curriculum-ul">
								<!-- 第一个三目运算符是取模判断数据的左右方向，第二个三目运算符是判断hasWord为true的情况下附加class区分 -->
								<li class = "curriculum-li"
									v-for = "(item2, index2) in item.courseList"
									:key = "item.courseList.id"
									:class = "[index2 % 2 != 0 ? left : right,
												{'curriculumColor': item2.id == curriculumTitleIndex &&  item2.name == Name},
												item2.hasWork ? 'bluish-Style' : '' ]"
									>
									<!-- 课程内容mouseout -->
									<div class = "curriculum-span" ref="element" 
									@mouseenter.stop = "clickCurriculum(item2.type, item2.id, item.id , index2, CurriculumData,item2)"
									@click.stop
									>
										<!-- /* 绘制横直线 */ -->
										<span class = "Y-axis"></span>
										<!-- /* 课程内容 */ -->
										<img src = "../../../assets/images/curriculum-logo.png" />
										<!-- 优先级原因把字体颜色需要写到p里，下面的css把!important变成级别最高 -->
										<p  :class = "item2.hasWork == true ? 'bluish-Styletext': ''">
											{{ item2.name | ellipsis }}
										</p>
									</div>
									<!-- 在点击课程的时候，使用v-if来弹出 -->
									<div class = "clickhander"
										:class = "{ qiehuan:fanhui == index }"
										v-if = "CurriculumStatues && item.id == CurriculumId && item2.id == CurriculumListId &&item2.name == Name "
										@mouseenter.stop
										>
										<!-- /* 绘制到点击之后课程对应的横直线 */ -->
											<span class = "Y-axisclick"></span>
											<!-- /* 绘制到点击之后竖直线 */ -->
											<span class = "X-axisclick" :style = "{'height': (GetLength) + 'px'}"></span>
											<!-- 在后台获取详细课程数据，还有把相对应的线绑定数据一起循环出来 -->
										<!-- {{CurriculumData.name }} -->
										<ul class = "clickhander-ul">
											
											<li class = "Detailed-course-data"
												v-for = "(item3, index3) in CurriculumData"
											>
												<!-- @mouseout =通过p标签把线和数据绑定到一起v-if = "item3.levels == 2"-->
												<p class = "detailedAxisTitle" v-if = "item3.levels == 3 || item3.levels == 2">
													<!-- /* 绘制到点击之后横直线 */ -->
													<span class = "Y-axis-clicktow"></span>
													<!-- 添加class，生成点击之后背景颜色改变 -->
													<span class = "detailedTitle" :class= "{'lowestLevelColor': index == lowestLevelTitleIndex}"
														  @click = "CurriculumDataclick(item3)"
														  @mouseover = "clickLowestLevel(index3,item3.id,item2.id, item3)">
														  <img src = "../../../assets/images/experimentalHints.png" v-if = "item3.experimentCourseFlag == true"/>
													 	{{ item3.name | ellipsis }}
													</span>
												</p>
												
												<!-- 开始制作第四层专科版嵌套 -->
												<ul class = "lowestLevel" 
													:class = "{ qiehuantow:fanhuitow == index }"
											     	v-if = "lowestLevelStatues && item2.id == lowestLevelId && item3.id == lowestLevelListId" 
													>
													<!--  -->
														<!-- -->
														<!-- /* 绘制到点击之后竖直线 */ -->
														<span class = "X-axistowclick" :style = "{height: (item3.children.length * 22 - 4) + 'px'}"></span>
														<!-- 开始最后一层的数据呈现 -->
														
														<li v-for = "(item4,index4) in item3.children"
															:key = "item4.id"
															>
														<!-- 通过p标签把线和数据绑定到一起-->
														<p class = "lowestLevelAxisTitle">
															<!-- 绘制开始之后的横直线 -->
															<span class = "Y-axistowclick"></span>
															<!-- 第四层数据呈现 -->
															<span class = "lowestLevelTitle">
															{{ item4.name | ellipsis }}
															</span>											
														</p>
													</li>
												</ul>
											</li>
										</ul>
									</div>
								</li>
							</ul>
							<!-- /* 绘制顶梁柱竖直线 */ -->
							<span class = "X-axis"  :style = "{'height': (item.courseList.length * 50 + 45)+'px'}"></span>
							<!-- /* 绘制竖直线结束 */ -->
						</li>
					</ul>
				</div>
			</div>
			<!-------------------- 靳春野负责的块结束 --------------------->
        </div>
        <div class="systemList" v-if="this.roleId == 'TEACHER' || this.roleId == 'MARKET_TEACHER' ||  this.roleId == 'UNIVERSITY_TEACHER'" style="display:none" >
		   <div style="clear:both"></div>
            <div class="systemList-course">
               <div class='systemLeft fl'>
                    <div class="navBoxs">
                        <span class="reportTemplate"  @click="toggleTabs(0)" :class="{templateCheck:cur == 0}">系统课程</span>
                        <span class="reportTemplate"  @click="toggleTabs(1)"  :class="{templateCheck:cur == 1}">非系统课程</span>
                    </div>
                    <div  v-show="cur == 0">
                        <div class="transfer-left blocks">
                            <div class="transfer-main " >
								<div class="emptylist" v-if="!fromData.length" >
									<img src="../../../assets/images/index_no_data.png"/>
									<p>暂无内容</p>
									<p>点击右下角按钮快去添加~</p>
								</div>
								<div v-else>
									<div class="emptylist" v-if="phase2" :class="flag?'active':'active2'">
										<img src="../../../assets/images/index_no_data.png"/>
										<p>暂无内容</p>
										<p>点击右下角按钮快去添加~</p>
									</div>
									<!-- <div class="emptylist" v-if="works2" :class="!flag?'active':'active2'">
										<img src="../../../assets/images/index_no_data.png"/>
										<p>暂无内容</p>
										<p>点击右下角按钮快去添加~</p>
									</div> -->
									<div v-for=" item in fromData"  :key="item.id"  >
										<div v-if="!item.phaseAllotted " class="checkboxlist" :class="flag?'active':'active2'">
											<el-checkbox-group v-model="checkList" >
												<el-checkbox  :label="item.id" :key="item.id"><img src="../../../assets/images/iconfile.png"/> <span class="hoverCalss">{{item.name}}</span></el-checkbox>
											</el-checkbox-group>
										</div>
										<div  class="checkboxlist" :class="!flag?'active':'active2'">
											<el-checkbox-group v-model="checkList" >
												<el-checkbox  :label="item.id" :key="item.id"><img src="../../../assets/images/iconfile.png"/> <span class="hoverCalss">{{item.name}}</span></el-checkbox>
											</el-checkbox-group>
										</div>
									</div>
								</div>
                            </div>
                        </div>
			        </div>
                    <div  v-show="cur == 1">
                        <div class="transfer-left blocks">
                            <div class="transfer-main ">
								<div class="emptylist" v-if="!fromData2.length" >
									<img src="../../../assets/images/index_no_data.png"/>
									<p>暂无内容</p>
									<p>点击右下角按钮快去添加~</p>
								</div>

                                <div v-else>
									<div class="emptylist" v-if="phase" :class="flag?'active':'active2'">
										<img src="../../../assets/images/index_no_data.png"/>
										<p>暂无内容</p>
										<p>点击右下角按钮快去添加~</p>
									</div>
									<!-- <div class="emptylist" v-if="works" :class="!flag?'active':'active2'">
										<img src="../../../assets/images/index_no_data.png"/>
										<p>暂无内容</p>
										<p>点击右下角按钮快去添加~</p>
									</div> -->
									<div v-for=" item in fromData2"  :key="item.id" >

										<div v-if="!item.phaseAllotted" class="checkboxlist" :class="flag?'active':'active2'">
											<el-checkbox-group v-model="checkList2"  >
												<el-checkbox  :label="item.id" :key="item.id"><img src="../../../assets/images/iconfile.png"/> <span class="hoverCalss">{{item.name}}</span></el-checkbox>
											</el-checkbox-group>
										</div>
										<div class="checkboxlist" :class="!flag?'active':'active2'">
											<el-checkbox-group v-model="checkList2"  >
												<el-checkbox  :label="item.id" :key="item.id"><img src="../../../assets/images/iconfile.png"/> <span class="hoverCalss">{{item.name}}</span></el-checkbox>
											</el-checkbox-group>
										</div>
									</div>
								</div>
                            </div>
                        </div>
                        <span class="edit">
                            <i class="iconfont icon-icon_edit" @click="edit"></i>
                        </span>
			        </div>
               </div>
               <div class='systemMiddle fl'>
                   <i class="iconfont icon-xiangyou1"></i>
               </div>
               <div class='systemRight fl'>
                    <div class="navBoxs">
                        <span class="reportTemplate"  @click="toggleTab(3)" :class="{templateCheck:cur2 == 3}">学习阶段</span>
                        <span class="reportTemplate"  @click="toggleTab(4)" :class="{templateCheck:cur2 == 4}">工作岗位</span>
                    </div>
                    <div  v-show="cur2 == 3">
						<div class="transfer-right blocks" >
							<div v-if="!addressee.length" class="emptylist">
								<img src="../../../assets/images/index_no_data.png"/>
								<p>暂无内容</p>
								<p>点击右下角按钮快去添加~</p>
							</div>
							<div v-else>
								<div  class="transfer-right-item"  v-for="(item, index) in addressee" :key="index">
									<p class="transfer-title" @click="moveUp(item)">
										<img src="../../../assets/images/filescourse.png" class="filescourse"/>
										<span v-if="!fromDisabled" class="titleIcon"> {{ item.name }}</span>
										<span v-if="fromDisabled" class="titleIcon" > {{ item.name }}</span>
										<span  class="transfer-center-item "  @click.stop="addressListTransfer(item,index)">
											<el-button  type="primary"  circle  :disabled="fromDisabled">加入</el-button>
										</span>
										<i class="iconfont icon-xiala-copy move_up_img "  v-if="item.move_up " v-show="item.courseList != '' && item.courseList" ></i>
										<i class="iconfont icon-shouqi move_up_img "  v-if="!item.move_up" v-show="item.courseList != '' && item.courseList"  ></i>
									</p>
									<!-- 内容区 -->
									<el-collapse-transition>
										<div class="transfer-main"  v-if="!item.move_up">
											<ul class="address-list-ul block">
												<draggable v-bind="dragOptions" @change='endEvent()' v-model="item.courseList">
													<li  class="address-list-li list-group-item" v-for="(item2, index2) in item.courseList" :key="index2">
														<img src="../../../assets/images/iconfile.png" v-if="item.courseList.length>0"/>
														<label>
															{{item2.name}}
														</label>
														<i class=" iconfont icon-Group- address-list-del" @click="clearList(item2,item2.id)"></i>
													</li>
												</draggable>
											</ul>
										</div>
									</el-collapse-transition>
								</div>
							</div>
						</div>
						<span class="edit">
							<i class="iconfont icon-icon_edit" @click="editStudy"></i>
				  		</span>
				    </div>
					<div v-show="cur2 == 4">
						<div class="transfer-right blocks" >
							<div v-if="!workList.length" class="emptylist">
								<img src="../../../assets/images/index_no_data.png"/>
								<p>暂无内容</p>
								<p>点击右下角按钮快去添加~</p>
							</div>
							<div v-else>
								<div  class="transfer-right-item"  v-for="(item, index) in workList" :key="index">
									<p class="transfer-title"  @click="moveUpWork(item)">
										<img src="../../../assets/images/filescourse.png" class="filescourse"/>
										<span v-if="!fromDisabled" class="titleIcon">{{ item.name }}</span>
										<span v-if="fromDisabled" class="titleIcon">{{ item.name }}</span>
										<span  class="transfer-center-item" >
											<el-button  type="primary" @click.stop="addressListTransfer2(item,index)" class="address-first-btn"  circle  :disabled="fromDisabled"
											>加入</el-button>
										</span>
										<i class="iconfont icon-xiala-copy move_up_img" v-if="item.move_up"  v-show="item.courseList != '' && item.courseList"></i>
										<i class="iconfont  icon-shouqi move_up_img" v-if="!item.move_up " v-show="item.courseList != '' && item.courseList" ></i>
									</p>
									<!-- 内容区 -->
									<el-collapse-transition>
										<div class="transfer-main"  v-if="!item.move_up" >
											<ul class="address-list-ul block">
												<li  class="address-list-li list-group-item" v-for="(item2, index2) in item.courseList"  :key="index2">
													<img src="../../../assets/images/iconfile.png" v-if="item.courseList.length>0"/>
													<label>
														{{item2.name}}
													</label>
													<i class="iconfont icon-Group- address-list-del" @click="clearList2(item2, item2.id,item)"></i>
												</li>
											</ul>
										</div>
									</el-collapse-transition>
								</div>
							</div>
						</div>
						<span class="edit">
							<i class="iconfont icon-icon_edit" @click="editWork"></i>
						</span>
					</div>
               </div>
            </div>
            <div class="save">
                <button class="button-style" @click="allSave" style="margin-right:12px;" >保 存</button>
				<button class="button-style" @click="cancel" >返 回</button>
            </div>
			<dialogCompont :show="show" :num="num"  :title="title" :listData='listData'  @close='close'  @closeBind="handleCloseBindWarn"></dialogCompont>
			<el-dialog :close-on-click-modal="false" title="编辑非系统课程"  :visible.sync="dialogPreview" width="600px"  class="preview">
				<el-input placeholder="请输入内容"  v-model.trim="content"></el-input>
				<button class="button-save" v-if="content" @click="dialog">保 存</button>
				<button class="button-dark" v-else>添 加</button>
				<ul class="list block">
					<li v-for="(item,index) in list" :key="index"  v-if="item.operation != -1">
						<img src="../../../assets/images/filescourse.png" class="filescourse"/>
						<input type="text"  v-model="replaceTitles" class="text-input" v-focus v-if="todoEdie == item"  @keyup.13="editorend(item)" @blur="blurend(item)"/>
						<label v-else class="textedits">{{item.name}}</label>
						<span class="operation">
							<i class="el-icon-edit" @click="editList(item)"></i>
							<i class="iconfont icon-cuowu" @click="delItem(item)"></i>
						</span>
					</li>
				</ul>
				<button @click="savesNosysterm" class="button-style centers" v-if="content.length <= 0">确 定</button>
				<el-button class="button-style centers centersEmpty"  v-else>确 定</el-button>
			</el-dialog>
        </div>
    </div>
</template>

<script>
	import draggable from 'vuedraggable'
	import dialogCompont from '@/components/dialogCompont'
	//引入靳春野课程体系样式呈现的css
	import '../../../assets/css/preview-course.css'
    export default {
        components: {
			 draggable,
			 dialogCompont
        },
        data(){
            return{
				//角色
				roleId:'',
			    //用于判断显示左侧中是系统还是非系统
				flag:true,
				//系统课程
				checkList:[],
				//非系统课程
				checkList2:[],
                //弹窗组件配置信息
				title: '',
				show: false,
				num:'', 
				//非系统课程
				content:'',
				//判断是否是当前那个
				todoEdie:'',
				//弹窗
				dialogPreview:false,
				//tab切换
				cur:0,
				cur2:3,
				//系统课程数据
				fromData:'',
				//非系统课程数据
				fromData2:'',
				//非系统课程弹窗数据
				listData:[],
				// 学习阶段
				addressee: [],
				//工作岗位
				workList:[],
				fromDisabled: true, // 添加按钮是否禁用
				//非系统课程
				list:[],
				//非系统标题
				replaceTitles:'',
				//判断右侧是否为空
				phase:'',
				works:'',

				phase2:'',
				//works2:'',

				//靳春野块开始
				// 工作岗位块
				ContentList:[],
				currenindex: '-',
				// 课程体系块
				PreviewCourse:[],
				// 根据取余来判断课程章节的左右
				left:"listleft",
				right:"listright",

				CurriculumData:[],

				fanhuitow:0,
				//工作岗位，点击变蓝色
				tabcontent:true,

				height:"height",
				fanhui:0,
				// PreviewCourse:PreviewCourse,
				// 获取每条详细课程对应竖线的长度
				GetLength:'',

				GetLengthtow:'',
				// 把开始颜色改成100，让刚开始点击前一个事件本事件第100个变颜色，而不影响到本点击事件只有点击时才变背景颜色的初衷
				lowestLevelTitleIndex: '-',
				curriculumTitleIndex: '-',
				// 明哥帮忙改动
				CurriculumStatues: false,
				CurriculumId:'',
				CurriculumListId:'',				
				//课程id
				coursesId:'',
				//靳春野仿照明哥修改
				lowestLevelStatues: false,
				lowestLevelId:'',
				lowestLevelListId:'',
				//本地存储课程学详情内容
				takList:{},
				//靳春野块结束
				//获取item3和item4

				//test
				lastOne:'',
				hasWorkOne:[],
				// 遍历courseList里的数据
				ArrList:[],

				Name:''

				
            }
        },
        computed: {
			//拖拽插件
			dragOptions() {
				return {
					animation: 200,
					group: "description",
					disabled: false,
				};
			},
		},
        watch: {
			checkList(val){
				if (val.length > 0) {
				// 穿梭按钮是否禁用
					this.fromDisabled = false;
				} else {
					this.fromDisabled = true;
				}
			},
			checkList2(val){
				if (val.length > 0) {
				// 穿梭按钮是否禁用
					this.fromDisabled = false;
				} else {
					this.fromDisabled = true;
				}
			},
			fromData:{
				handler(newValue, oldValue){
					
					let phaseAllotted = newValue.every((item)=>{
						return item.phaseAllotted
					})　　　　　　　　
					let work = newValue.every((item)=>{
						return item.workAllotted
					})　　　
					this.phase2 = phaseAllotted
					//this.works2 = work
				},
				deep:true
			},
			fromData2:{
				handler(newValue, oldValue){
					let phaseAllotted = newValue.every((item)=>{
						return item.phaseAllotted
					})　　　　　　　　
					let work = newValue.every((item)=>{
						return item.workAllotted
					})　　　
					this.phase = phaseAllotted
					this.works = work
				},
				deep:true
			}
		},
		//靳春野接口创建
		created(){
			this.roleId=this.$store.state.user.roles[0]
			//初始化数据
			this.init()
			// 靳春野
			// 初始化
			// 课程章节
			this.initTree()
			// 工作岗位
			this.initTreeTow()
		},
		//靳春野程序段：clickDown是在页面开始的时候就先把自动索引点击第一个，有v-for循环，需要自动点击索引第一个，则需要binding。
		// directives: {
		// 	clickDown: {
		// 		inserted(el,binding,index) {
		// 			if(binding.value===0){
		// 			el.click()
		// 			}
		// 		}
		// 	}
		// },
		//靳春野过滤器filter，判断文字过长而显示省略号
		filters:{
            ellipsis(value){
                if (!value) return '';
                if (value.length > 10) {
                    return value.slice(0,10) + '...'
                }
                return value
            },

			//限制工作岗位字节长度
			ellipsistow(value){
                if (!value) return '';
                if (value.length > 10) {
                    return value.slice(0,10) + '...'
                }
                return value
            }
		},
		beforeDestroy () {
			//isClickSystem 是了再本地存储布尔值，是否是本页面点击的课程体系
		   this.$localstorage.putLocalStorage("isClickSystem", false);
        },
        methods:{

			//当课程章节展开的的时候点击空白部分课程章节收回效果
			clickEvent(){
				$('.clickhander').css('display','none')
				// 如果hasWork为false的时候，那么样式在鼠标滑过课程体系的时候执行css属性，如果为true的时候也就是变蓝，样式不可变
				for(let a = 0; a < this.ArrList.length; a++){
					if(this.ArrList[a].hasWork == false){
						$('.curriculumColor').css('backgroundColor','#ffffff')
					}
				}
			},
			//初始化页面数据
			init(){
				let self = this
                self.$http.get('/tes/course-system/course').then(response => {
                    let res = response.data
                    if(res.code == '200') {
					   self.fromData = res.data.systemCourseList
					   self.fromData2 = res.data.notSystemCourseList
					    //学习阶段
					    if(res.data.phaseList != undefined){
						  	for(let i =0; i<res.data.phaseList.length; i++){
								self.$set(res.data.phaseList[i],'move_up',true)
							  }
							  self.addressee = res.data.phaseList
					    }
					   //工作岗位
					    if(res.data.workList != undefined){
						  	for(let i =0; i<res.data.workList.length; i++){
								self.$set(res.data.workList[i],'move_up',true)
							}
							self.workList = res.data.workList
					    }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
			},
			//返回
			cancel(){
				let self = this
				//重新调用接口initTree()
				self.init()
				self.clickEvent()
				self.initTree()
				self.initTreeTow()
				//保存时候清空选中数据
				$('.bluish-Style').css({
					'color':'black',
					'border': '1px solid rgb(185, 185, 185)',
					'background-color': '#fff',
				});
				$('.bluish-Styletext').css({
					'color':'rgb(103, 103, 103)'
				})
				self.checkList = []
				self.checkList2 = []
				// 如果课程体系树状图里没有任何章节课程，那么显示添加章节，如果有课程显示工作岗位和课程
				if(this.PreviewCourse == '' || this.addressee == ''){
					$('.empty-systerm').show()
					$('.systemList').hide()
					$('.systemListShow').hide()
					$('.coursetab').hide()
					//console.log(11110)
				}else{
					$('.systemList').hide()
					$('.empty-systerm').hide()
					$('.systemListShow').show()
					$('.coursetab').show()
					// $('.clickhander').hide()
				}
				//如果内容是清空的话 返回需要显示暂无数据 ，返之跳转到春页面
				// if(this.addressee.length == ''  ){
				// 	$('.empty-systerm').show()
				// 	$('.systemList').hide()
				// 	$('.systemListShow').hide()
				// 	$('.coursetab').hide()	
				// 	console.log(111)
				// }
				// this.exit = this.addressee.find((item)=>{
				// 	return item.courseList.length > 0
				// })
				// console.log(this.exit,555)
				// if(this.exit){
				// 	 console.log(22222)
				// 	$('.empty-systerm').hide()
				// 	$('.systemList').hide()
				// 	$('.systemListShow').show()
				// 	$('.coursetab').show()	
				
				// }else{
				// 	console.log(333)
				// 	$('.empty-systerm').hide()
				// 	$('.systemList').hide()
				// 	$('.systemListShow').hide()
				// 	$('.coursetab').hide()
				// }
			},
			//获取非系统课程
			NoSystem(){
				let self = this
                self.$http.get('/tes/course-system/not-system-course').then(response => {
                    let res = response.data
                    if(res.code == '200') {
					 	self.list = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
			},
            //拖拽数据
			endEvent(){
			   	this.$forceUpdate()
			},
            //tab切换
            toggleTabs(index){
				this.cur = index;
			},
			toggleTab(index){
				this.cur2 = index;
				this.checkList2 = []
				this.checkList = []
				if(this.cur2 == 3){
					this.flag = true
				}else if(this.cur2 == 4){
					this.flag = false	
				}
            },
            //编辑非系统课程
			edit(){
				this.clickSave()
				this.content = ''
				this.dialogPreview = true
				//非系统课程
				this.NoSystem()

            },
			 //编辑学习阶段
			editStudy(){
				// this.content = ''
				// this.dialogPreview = true
				this.clickSave()
				this.title = '编辑学习阶段'
				this.show = true
				this.num = '1'
				this.StudyPhase()
            },
            //学习阶段
            addressListTransfer(item,index) {
				//左侧数据删除
				if(!this.fromDisabled){
					for(let i=0; i<this.addressee.length; i++){
						this.addressee[i].move_up = true	
					}
					item.move_up = false
				}
				let arr =[]
				let arr2 =[]
				let childrens =[]
				for(let k=0; k< this.fromData.length; k++){
					for(let i=0; i < this.checkList.length; i++){
						if( this.fromData[k].id == this.checkList[i]){
							//this.fromData[k].phaseAllocatted = false
							this.$set(this.fromData[k],'phaseAllotted',true)
							arr.push(this.fromData[k])
						}
					}
				}
				for(let m =0; m < arr.length; m++){
					//如果新建的没有子集children
					if(this.addressee[index].courseList == undefined){
						this.addressee[index].courseList = childrens
					}
					this.addressee[index].courseList.push(arr[m])
				}

				for(let k=0; k< this.fromData2.length; k++){
					for(let i=0; i < this.checkList2.length; i++){
						if( this.fromData2[k].id == this.checkList2[i]){
							//this.fromData[k].phaseAllocatted = false
							this.$set(this.fromData2[k],'phaseAllotted',true)
							arr2.push(this.fromData2[k])
						}
					}
				}
				for(let m =0; m < arr2.length; m++){
					//如果新建的没有子集children
					if(this.addressee[index].courseList == undefined){
						this.addressee[index].courseList = childrens
					}
					this.addressee[index].courseList.push(arr2[m])
				}
				this.checkList = []
				this.checkList2 = []

            },
            //学习阶段清除
			clearList(item, id) {
				let self = this
				for(let i=0; i < self.addressee.length; i++){
					if(self.addressee[i].courseList){
						let newData = self.addressee[i].courseList.filter(function(value){
							return !(value.id == id && value.type == item.type)
						})
						self.addressee[i].courseList = newData
					}
				}
				//判断当前对象属于系统课程还是非系统课程
				if(item.type == 1){
					this.fromData.forEach(t => {
						if (t.id == id) {
							t.phaseAllotted = false
						}
					})
				}
				if(item.type == 2){
					this.fromData2.forEach(t => {
						if (t.id == id) {
							t.phaseAllotted = false
						}
					}
				)}
				this.$forceUpdate()
            },
			//编辑工作岗位
			editWork(){
				this.clickSave()
				this.title = '编辑工作岗位'
				this.show = true
				this.num = '2'
				this.workPlace()
			},
			//工作岗位
			addressListTransfer2(item,index){
				let self = this
				//左侧数据删除
				 if(!this.fromDisabled){
					 for(let i=0; i < this.workList.length; i++){
						this.workList[i].move_up = true	
					}
					item.move_up = false
				}
				let arr =[]
				let arr2 =[]
				let childrens =[]
				for(let k=0; k < this.fromData.length; k++){
					for(let i=0; i < this.checkList.length; i++){
						if( this.fromData[k].id == this.checkList[i]){
							//this.fromData[k].phaseAllocatted = false
							//this.$set(this.fromData[k],'workAllotted',true)
							
							arr.push(this.fromData[k])
						}
					}
				}
				for(let m =0; m < arr.length; m++){
					//如果新建的没有子集children
					if(this.workList[index].courseList == undefined){
						this.workList[index].courseList = childrens
					}
				}
				//新加功能是为了去掉左侧的重复id
				this.workList[index].courseList = this.isModify(arr,this.workList[index].courseList)
				for(let k=0; k< this.fromData2.length; k++){
					for(let i=0; i<this.checkList2.length; i++){
						if( this.fromData2[k].id == this.checkList2[i]){
							//this.fromData[k].phaseAllocatted = false
							//this.$set(this.fromData2[k],'workAllotted',true)
							arr2.push(this.fromData2[k])
						}
					}
				}
				for(let m =0; m<arr2.length; m++){
					//如果新建的没有子集children
					if(this.workList[index].courseList == undefined){
						this.workList[index].courseList = childrens
					}
					//this.workList[index].courseList.push(arr2[m])
				}
				//新加功能是为了去掉左侧的重复id
				this.workList[index].courseList = this.isModify(arr2,this.workList[index].courseList)

				this.checkList = []
				this.checkList2 = []

			},
			//判断两个数组是否是重复
			isModify (arr2,brr) {  
				for (let i=0; i < arr2.length; i++) {
					let temp = arr2[i].id;
					let name = arr2[i].name;
					for (let j=0; j<brr.length; j++) {
						if (brr[j].id === temp && brr[j].name === name) {
							brr.splice(j,1);
							break
						}
					}
				}
				return brr.concat(arr2);	
			},
			//工作岗位清除
			clearList2(item, id,items) { 
				let self = this
				for(let k =0; k < items.courseList.length; k++){
					if(items.courseList[k].id == item.id ){
						//删除
					}
				}
				for(var i=0; i < self.workList.length; i++){
					for(let k = 0; k< items.courseList.length; k++){
						if(items.courseList[k].id == item.id && items.courseList[k].name == item.name){
							items.courseList.splice(k,1)
						}
					}
					//self.workList[i].courseList = items.courseList
				}
				// for(var i=0; i < self.workList.length; i++){
				// 	if(self.workList[i].courseList){
				// 		let newData = self.workList[i].courseList.filter(function(value){
				// 			return !(value.id == id && value.type == item.type)
				// 		})
				// 		//console.log(self.workList,999)
				// 		self.workList[i].courseList = newData
				// 	}		
				// }
				
				//判断当前对象属于系统课程还是非系统课程
				// if(item.type == 1){
				// 	self.fromData.forEach(t => {
				// 		if (t.id == id) {
				// 			t.workAllotted = false
				// 		}
				// 	})
				// }
				// if(item.type == 2){
				// 	self.fromData2.forEach(t => {
				// 		if (t.id == id) {
				// 			t.workAllotted = false
				// 		}
				// 	})

				// }
				this.$forceUpdate()
			},
            //获取学习阶段数据
            StudyPhase(){
				let self = this
                self.$http.get('/tes/course-system/learning-phase').then(response => {
                    let res = response.data
                    if(res.code == '200') {
					 	self.listData = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                     console.log(err)
                })
			},
			//获取工作数据
            workPlace(){
				let self = this
                self.$http.get('/tes/course-system/work-place').then(response => {
                    let res = response.data
                    if(res.code == '200') {
					 	self.listData = res.data
                    }else{
                        self.$message.error(res.message)
                    }
					if(!this.ContentList){
						$('container').css('display', 'none')
					}
                }).catch(err => {
                     console.log(err)
                })
			},
            //工作岗位伸缩
			moveUpWork(item){
				if(item.move_up){
					for(let i=0; i<this.workList.length; i++){
						this.workList[i].move_up = true	
					}
					item.move_up = !item.move_up
				}else{
					item.move_up = !item.move_up
				}
			},
			//学习阶段伸缩
			moveUp(item){
				if(item.move_up){
					for(let i=0; i < this.addressee.length; i++){
						this.addressee[i].move_up = true	
					}
					item.move_up = !item.move_up
				}else{
					item.move_up = !item.move_up
				}
			},
			//编辑每项
			editList(item){
				for(let i= 0; i < this.list.length; i++){
					if(this.list[i].id == item.id ){
						this.todoEdie = item
						this.replaceTitles = item.name
					}
				}
			},
			//编辑结束
			editorend(item){
				let vall = JSON.parse(JSON.stringify(this.list))
				for(let i=0;i < vall.length; i++){
					if(vall[i].id == item.id && vall[i].name == item.name ){
						this.todoEdie = ''
						if(item.name == this.replaceTitles){
							vall[i].operation = 0
							vall[i].name = this.replaceTitles
						}else{
							vall[i].operation = 2
							vall[i].name = this.replaceTitles
						}
					}
				}
				this.list = vall
			},
			//鼠标离开焦点
			blurend(item){
				let vall = JSON.parse(JSON.stringify(this.list))
				for(let i=0;i < vall.length; i++){
					if(vall[i].id == item.id && vall[i].name == item.name){
						this.todoEdie = ''
						if(item.name == this.replaceTitles){
							vall[i].operation = 0
							vall[i].name = this.replaceTitles
						}else{
							vall[i].operation = 2
							vall[i].name = this.replaceTitles
						}
					}
				}
				this.list = vall
			},
			//删除某项
			delItem(item){
				this.list.forEach(val=>{
					if(item.id){
						if(val.id == item.id && val.name == item.name){
							val.operation = -1
						}
					}else{
						this.list = this.list.filter((val)=>{
							return !(val.name == item.name  && val.id == item.id )
						})
					}

				})
			},
			//弹窗添加
			dialog(){
				for(let i=0; i< this.list.length; i++){
					if(this.list[i].name == this.content){
						this.$message({
							message: '名称已重复，请重新添加',
							type: 'warning'
						})
						this.content = ''
						return
					}
				}	
				this.list = this.list.concat({'name':this.content,'operation':1})
				this.content = ''
			},
			//保存非系统课程
			savesNosysterm(){
				//this.dialogPreview = false
				//console.log(this.list,9999)
				let self = this
				const loading = self.$loading({
					lock: true,
					text: '正在保存中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
                self.$http.post('/tes/course-system/not-system-course',self.list).then(response => {
                    let res = response.data
                    if(res.code == '200') {
					    
					    self.$message({
							message: '保存成功',
							type: 'success'
						})
						self.init()
						self.dialogPreview = false
					    loading.close()
                    }else{
						self.$message.error(res.message)
						loading.close()
                    }
                 })
                .catch(err => {
					loading.close()
                 }
                )
			},
			//子组件传来的数据
			close(n,val,NoSystemList){
				//n 子组件传来的值
				//NoSystemList 是接收值
				let self = this
				const loading = self.$loading({
					lock: true,
					text: '正在保存中...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				if(n == '1'){
					//学习阶段保存
               		self.$http.post('/tes/course-system/learning-phase',NoSystemList).then(response => {
                    let res = response.data
						if(res.code == '200') {
							self.show = val
							self.$message({
								message: '保存成功',
								type: 'success'
							})
							self.init()
							loading.close()
						}else{
							self.$message.error(res.message)
							loading.close()
						}
					})
					.catch(err => {
						loading.close()
					}
                )
				//console.log(NoSystemList,'弹窗数据')
				}else if(n == '2'){
					//工作岗位保存
					self.$http.post('/tes/course-system/work-place',NoSystemList).then(response => {
                    let res = response.data
						if(res.code == '200') {
							self.show = val
							self.$message({
								message: '保存成功',
								type: 'success'
							})
							self.init()
							loading.close()
						}else{
							self.$message.error(res.message)
							loading.close()
						}
					})
					.catch(err => {
						loading.close()
					})
					//console.log(NoSystemList,'弹窗数据2')
				}

			},
			//关闭子组件的弹窗
			handleCloseBindWarn() {
				this.show = false
			},
			//保存整个
			allSave(){
				let self = this
				// if(this.addressee.length == 0 && this.workList.length == 0){
				// 	self.$message({
				// 		message: '请添加学习阶段或工作岗位',
				// 		type: 'warning',
				// 	})
				// 	return
				// }
				self.$http.post('/tes/course-system/course',{
					phaseList:this.addressee,
					workList:this.workList,
				}).then((response) => {
                    let res = response.data
						if(res.code == '200') {
							self.$message({
								message: '保存成功',
								type: 'success',
							})
							//重新调用接口initTree()
							self.init()
							self.clickEvent()
							self.initTree()
							self.initTreeTow()
							//保存时候清空选中数据
							$('.bluish-Style').css({
								'color':'black',
								'border': '1px solid rgb(185, 185, 185)',
								'background-color': '#fff',
							});
							$('.bluish-Styletext').css({
								'color':'rgb(103, 103, 103)'
							})
							self.checkList = []
							self.checkList2 = []
							// 如果课程体系树状图里没有任何章节课程，那么显示添加章节，如果有课程显示工作岗位和课程
							if(this.PreviewCourse == '' || this.addressee == ''){
								$('.empty-systerm').show()
								$('.systemList').hide()
								$('.systemListShow').hide()
								$('.coursetab').hide()
								//console.log(11110)
							}else{
								$('.systemList').hide()
								$('.empty-systerm').hide()
								$('.systemListShow').show()
								$('.coursetab').show()
								// $('.clickhander').hide()
							}
						}else{
							self.$message.error(res.message)
						}
						
					})
				.catch(err => {
					console.log(err)
				})
				
			},
			//点击保存
			clickSave(){
				let self = this
				self.$http.post('/tes/course-system/course',{
					phaseList:this.addressee,
					workList:this.workList,
				}).then((response) => {
                    let res = response.data
						if(res.code == '200') {
							self.init()
						}else{
							self.$message.error(res.message)
						}
					})
				.catch(err => {
					console.log(err)
				})
			},
			//靳春野块methods开始
			//初始化
			initTree(){
				this.$http.get('/tes/course-system').then(response => {
					let res = response.data
					this.PreviewCourse = res.data
					this.hasWorkOne = res.data
					
				}).catch(err => {
					console.log("抱歉，数据没传过来",err);
				})
			},
			//调用工作岗位work-place接口
			initTreeTow(){
				this.$http.get('/tes/course-system/work-place').then(response => {
					let res = response.data
					if(res.code == '200'){
						let json = res.data
						// 在工作岗位中添加数据isCheck初始值全部为true
						for (let i = 0; i < res.data.length; i++) {
							json[i].isCheck = true
						}
						this.ContentList = json
					}
				}).catch(err => {
					console.log("抱歉，数据没传过来",err);
				})
			},
			// 菜单栏判断点击锚点，并且每次点击初始化接口判断对应的hasWord是否等于true，为true变蓝
			clickHander(index,id, isCheck,hasWork){
				let self = this
				self.currenindex = index;
				
				self.$http.get('/tes/course-system?workId='+ id).then((response) => {
					let res = response.data
					if(res.code == '200') {
						self.PreviewCourse = res.data
						// console.log(self.hasWorkOne,999)
						//for循环遍历课程
						for(var i = 0; i < res.data.length; i++){
							//for循环遍历课程章节
							for(var k=0; k< res.data[i].courseList.length; k++){
								// 如果课程章节下面有hasWork的话，把这个章节的整体数据都传到上面创建的数组中
								if(res.data[i].courseList[k].hasWork){
								   self.ArrList.push(res.data[i].courseList[k])
								}
							}
						}
						console.log(self.ArrList,77)
						//进入页面——在不点击对应岗位的时候，样式不变
						$('.bluish-Style').css({
							'color':'black',
							'border': '1px solid rgb(185, 185, 185)',
							'background-color': '#fff',
						});
						$('.bluish-Styletext').css({
							'color':'rgb(103, 103, 103)'
						})
						// 判断isCheck如果为false的话，样式不变
						self.$nextTick(() => {
							if(!isCheck){
								$('.bluish-Style').css({
									'color':'black',
									'border': '1px solid rgb(185, 185, 185)',
									'background-color': '#fff',
								});
								$('.bluish-Styletext').css({
									'color':'rgb(103, 103, 103)'
								})
							// 否则样式变成蓝色
							}else{
								$('.bluish-Style').css({
									'color':'#1276eb',
									'border': '1px solid #65aafa',
									'background-color': '#eaf5ff',
								});
								$('.bluish-Styletext').css({'color': '#1276eb'});
							}
							for (let i = 0; i < self.ContentList.length; i++) {
								self.ContentList[i].isCheck = true
							}
							self.ContentList[index].isCheck = !isCheck
						})
					}else{
						self.$message.error(res.message)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 课程体系方法开始
			clickCurriculum(type, CurriculumListId, id ,index2, item2,item22){
				let self = this

				// type 课程类型,1-系统课程,2-非系统课程
				if(type == 1){
					self.$http.get('/tes/course/' + CurriculumListId + '/chapter/list').then((response) => {
                    let res = response.data
						if(res.code == '200') {
							for(let a = 0; a < this.ArrList.length; a++){
								// 如果hasWork为false的时候，那么样式在鼠标滑过课程体系的时候执行css属性，如果为true的时候也就是变蓝，样式不可变
								if(this.ArrList[a].hasWork == false){
									$('.curriculumColor').css('backgroundColor','#fff')
								}
							}
							self.CurriculumData = res.data
							self.CurriculumStatues = true
							self.CurriculumId = id
							self.CurriculumListId = CurriculumListId
							self.curriculumTitleIndex = CurriculumListId;
							self.Name = item22.name
							self.GetLength = self.CurriculumData.length * (32)  - 31;
							// 每次重新点击一下（课程章节）都会把（item4）变为空，起到了点击刷新的作用
							self.lowestLevelStatues = false
							self.lastOne = res.data.length - 1
							// 点解课程章节之后，课程体系跟页面底部的距离bottom会根据纤细课程的高度而改变，默认值设置为200像素
							var heig = self.GetLength + 'px';
							this.$nextTick(()=>{
								$('.preview-course').css('margin-bottom',heig)
								$('.clickhander').css('display','block')
								// 如果hasWork为false的时候，那么样式在鼠标滑过课程体系的时候执行css属性，如果为true的时候也就是变蓝，样式不可变
								for(let a = 0; a < this.ArrList.length; a++){
									if(this.ArrList[a].hasWork == false){
										$('.curriculumColor').css('backgroundColor','#f2f2f2')
									}
								}
							})
							// for循环出系统课程的个数
							// 		如果系统课程个数为1，那么竖线的高度就为16像素
							// 		如果课程章节下面children的个数大于一，那么竖线的高度为系统课程的个数+课程章节下面children的个数减一
							// 		如果课程章节下children的个数为空，那么系统章节个数减去children为空的个数，然后再计算线的高度
							var a = 0;
							for(let i = 0; i < self.CurriculumData.length; i++){
								if(self.CurriculumData.length == 1){
									self.GetLength = self.CurriculumData.length * (32) - 16;
								}
								// else if(self.CurriculumData[i].children.length > 1){
								// 	self.GetLength = (self.CurriculumData.length + (self.CurriculumData[i].children.length - 1)) * (32) - 31;
								// 	console.log(self.GetLength,888)
								// }else if(self.CurriculumData[i].children.length == ''){
									// a += self.CurriculumData[i].children.length;
									// self.GetLength = (self.CurriculumData.length - a) * (32) - 31;
								// }
							}
							//this.CurriculumData.push(item2);
						}else{
							self.$message.error(res.message)
						}
					})
				    .catch(err => {
					    console.log(err)
					})
					// console.log(self.curriculumTitleIndex);
					//.log(self.CurriculumData.length,'获取系统课程的个数');
				}else{
					console.log("抱歉，无数据");
					self.curriculumTitleIndex = '';
				}
			},
			CurriculumDataclick(item,item3){
				//console.log(item,"点击详细课程时，显示跳转")
				//item 单任务  item3 多
				let self = this
				self.$localstorage.removeLocalStorage('takList','')
				// self.takList['taskChildrenId'] = ''
			    if(item3){
					self.takList['taskId'] = item.id
					self.takList['taskLevels'] = item3.levels
					// self.takList['taskChildrenId'] = item3.id			
					self.$localstorage.putLocalStorage('takList',self.takList)
				}else{
					self.takList['taskId'] = item.id
					self.takList['taskLevels'] = item.levels
					self.$localstorage.putLocalStorage('takList',self.takList)
				}
				 self.$router.push({
					 path:'/Teaching/MyCourses/CourseDetail',
				})
				//self.$localstorage.putLocalStorage("setCourseId", item.courseId);
			},
			//当点击组织课程体系按钮时，跳转到systemList(组织课程体系)页面。
			CurriculumOnclick(){
				// alert("生活愉快，开心快乐每一天！");
				$('.systemList').show()
				$('.empty-systerm').hide()
				$('.systemListShow').hide()

				//yx添加存储
				//yx 需要小重新穿梭数据
				this.init()
				this.$localstorage.putLocalStorage("isClickSystem", true);
			},
			clickLowestLevel(index3,item3Id,item2Id, item3){
			let self = this 
			self.$localstorage.putLocalStorage("setCourseId", item2Id);
			//存储课程id

			//判断如果children不等于undefind，执行children数据高度叠加到上一级竖线高度上，否则为false，解决了如果没数据length报错的问题。
			if(item3.children != undefined){
				this.$nextTick(()=>{
				var heig = self.GetLength + 'px';
				$('.preview-course').css('margin-bottom',heig)
				// $('.curriculumColor').css('background','white')
			})
			}else{
				return false;
			}
			self.lowestLevelStatues = true
			self.lowestLevelId = item2Id
			self.lowestLevelListId = item3Id
			// self.curriculumTitleIndex = lowestLevelListId;
			// console.log(item3.length);
			// 判断lowestLevel下是否有数据
			if (item3.children == undefined) {
				console.log('本课程下暂无章节')
				return;
			}
			// this.orderChildTow = !this.orderChildTow;
			// 如果detailed下面的index等于detailed的最后一个，那么就返回原detailed和的高度
			//    console.log(self.lastOne,7878)
				if(index3 == (self.lastOne)){
					this.GetLength = self.CurriculumData.length * (32) - 31;
				// 否则就加上第四层嵌套的高度
				}else{	
					this.GetLength = self.CurriculumData.length * (32)  - 31 + (item3.children.length * 22 + 10);
					console.log(item3.children.length)
				}
				this.fanhuitow = index3;
				//定义开始变背景色的位置
				// this.lowestLevelTitleIndex = index3; 
			
			}
			//靳春野块methods结束
        }
    }
</script>
<style scoped>
.day_class {
	margin-bottom: 500px;
}
.active{
	display: block
}
.active2{
	display: none
}
.el-dialog__wrapper>>>.el-dialog__body{
	padding: 30px 50px;
}
.el-input{
	display: inline;
}
.el-input>>>.el-input__inner{
	width: 280px;
}
 .el-checkbox>>>.el-checkbox__label{
	/* overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 295px;
	display: inline-block */
}
.el-checkbox>>>.el-checkbox__input{
	vertical-align: 1px;
}
.el-checkbox>>>.el-checkbox__inner{
	vertical-align: -4px;
}

.el-tabs--card>>>.el-tabs__item{
	width: 200px;
}
.el-button--primary{
	background-color:transparent;
	border-color:#d9d9d9;
	color: #999;
}
.el-button--primary.is-disabled{
	color: #999;
	background-color:transparent;
	border-color:#d9d9d9;
}
.el-button--primary{
	/* background-color:transparent;
	color: #1276eb; */

	color: #999;
}
 .block::-webkit-scrollbar{
	width: 2px;
}
.block::-webkit-scrollbar-thumb {
	background: #dededd;
	border-radius:50px;
}
.block{
	overflow-y: scroll;
	max-height: 430px;
}
 .blocks::-webkit-scrollbar{
	width: 2px;
}
.blocks::-webkit-scrollbar-thumb {
	background: #dededd;
	border-radius:50px;
}
.blocks{
	overflow-y: scroll;
	max-height: 470px;
}

</style>
<style lang="scss" scoped>
	.jx-content{
		margin-top: 30px;
		overflow: hidden;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		user-select:none;
    }
	.empty-systerm-img{
		clear: both;
		text-align: center;
		padding: 100px 0 300px 120px
	}
	.student-empty-systerm-img{
		clear: both;
		text-align: center;
		padding: 200px 0 300px 0px
	}
      .systemList-course{
            max-width: 910px;
            margin: 20px auto;
            overflow: hidden;
            .systemLeft{
                width: 400px;
                height: 590px;
                border: 1px solid #ebeef5;
                border-radius: 3px;
                position: relative;

            }
            .systemMiddle{
                width: 105px;
                line-height: 590px;
                height: 590px;
                text-align: center;
                i{
                    font-size: 26px;
                    color: #c9c9c9;
                }
            }
            .systemRight{
                width: 400px;
                height: 590px;
                border: 1px solid #ebeef5;
                border-radius: 3px;
                position: relative;
            }

        }
        .save{
            margin: 40px auto;
            width: 160px;
            clear: both;
        }
        .navBoxs{
            background: #fafafa;
            height:40px;
            line-height: 40px;
			display: flex;
            span{
                display: inline-block;
                height: 40px;
                width: 200px;
                text-align: center;
                border-bottom: 1px solid #ebeef5;
            }
            .templateCheck{
                background: #1277eb;
                color: #fff;
                cursor: pointer;
            }
            .reportTemplate{
                cursor: pointer;
            }
        }
        .transfer-main {
            padding: 0px 18px;
			.address-list-ul{
				padding-left: 6px;
			}
        }
        .transfer-left {
            padding: 25px 0px;
        }
        .transfer-right {
            padding: 20px 10px;
        }
        .edit{
            position: absolute;
            bottom: 14px;
            right: 25px;
            font-size: 20px;
			cursor: pointer;
			&:hover{
				color: #4c9ffe;
			}

        }
        .icon-icon_edit{
            color: #1277eb;
			font-size: 20px;
			&:hover{
				color: #4c9ffe;
			}
        }
        .el-button.is-circle{
            padding:3px 5px;
            border-radius:4px;
        }
        .titleIcon{
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: bottom;
        }
        .transfer-title{
            padding: 0 10px;
            height: 35px;
            line-height: 35px;
            //color: #1276eb;
            font-size: 14px;
			&:hover{
				color: #1276eb;
				cursor: pointer;
				.el-button--primary{
					color: #1276eb;
					border-color:#1276eb;
				}
				.el-button--primary.is-disabled{
					border-color:#d9d9d9;
					color: #999;
				}
				i{
					color: #1276eb;
				}
			}
        }
		
        .filescourse{
            vertical-align: 1px;
            margin-right: 2px;
        }
         .move_up_img {
            float: right;
            cursor: pointer;

        }
        .address-list-li {
            position: relative;
            padding: 6px 10px 6px 4px;
            border-radius: 3px;
            line-height: 25px;
            height: 25px;
            overflow: hidden;
            cursor: pointer;
            white-space: nowrap;
            text-overflow: ellipsis;
			label{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				width: 290px;
				display: inline-block;
			}
            img{
                vertical-align: baseline
            }

        }
        .address-list-li:hover {
            background-color: #f5f7fa;
        }
        .address-list-li:hover .address-list-del {
            display: block;
        }
         .address-list-del {
            display: none;
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -6px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-style:normal;
            text-align: center;
            color: #727272;
            cursor: pointer;
        }
        .icon-shouqi ,.icon-xiala-copy{
            font-size: 20px;
            margin-top: 6px;
            height: 25px;
			color: #cccccc;
        }
		.checkboxlist{
			height: 33px;
			line-height: 33px;
			.hoverCalss{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 300px;
				display: inline-block;
				vertical-align: bottom;
			}

		}
		.button-dark{
			background: #8c8d90d6;
			color: #fff;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
			border-radius: 3px;
			width: 52px;
			margin-left: 4px;
			margin-top: -2px;
		}
		.button-dark{
			background: #8c8d90d6;
			color: #fff;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
			border-radius: 3px;
			width: 52px;
			margin-left: 4px;
			margin-top: -2px;
		}
		.button-save{
			background: #1277eb;
			color: #fff;
			cursor: pointer;
			height: 32px;
			line-height: 32px;
			border-radius: 3px;
			width: 52px;
			margin-left: 4px;
			margin-top: -2px;
		}
		 //弹窗样式
		.list{
			margin: 14px 0px;
		}
		.list>li{
			line-height: 32px;
			height: 32px;
		}
		.list .textedits{
			max-width: 320px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			display: inline-block;
		}
		.list>li:hover{
			cursor: pointer;
		}
		.list>li:hover  .operation{
			display: inline-block;
		}
		.operation{
			display: none;
		}
		.icon-cuowu{
			color: #a1a1a1;
			cursor: pointer;
		}
		.el-icon-edit{
			font-size: 18px;
			color: #a1a1a1;
			cursor: pointer;
			margin-left: 10px;
		}
		.el-icon-circle-close{
			font-size: 18px;
			color: #a1a1a1;
			cursor: pointer;
			margin-left: 5px;
		}
		.text-input{
			height: 30px;
			line-height: 30px;
			border-radius: 3px;
			border: 1px solid #2b77e5;
			color: #979797;
			margin-left: 5px;
			padding-left: 5px;
			width: 300px;
		}
		.list-group-item{
			cursor: move;

		}
		.centers{
			margin: 0 auto;
			display: block;
		}
		.emptylist{
			margin:  160px auto;
			text-align: center;
			&>p{
				line-height: 26px;
				color: #999999;
			}
			&>img{
				margin-bottom: 8px;
			}
		}
		.preview{
			.centersEmpty{
				color: #999;
				border: 1px solid #999;
				&:hover{
					background: transparent;
					color: #999;
					cursor: not-allowed
				}
			}
		}
		/*------------------------------
			靳春野显示页面开始
		菜单栏数据鼠标点击和鼠标移动样式

		------------------------------*/
		.tabcontent{
			font-weight: bold;
			color: #1277eb;
			border: 1px solid #65aafa;
			background-color: #eaf5ff;
		}
		.tab-contentGlide:hover{
			color: #1277eb;
			border: 1px solid #65aafa;
			background-color: #eaf5ff;
		}
		.tab-contentGlide.active{
			font-weight: bold;
			color: #1277eb;
			border: 1px solid #65aafa;
			background-color: #eaf5ff;
		}
		/*------------------------------

		课程体系第二层嵌套的鼠标点击和鼠标移动样式

		------------------------------*/
		.clickhander{
			display: block;
		}
		// .lowestLevel{
			// display: none;
		// }
		.qiehuan{
			display: block;
		}
		.qiehuantow{
			display: block;
		}
		/*------------------------------

		课程体系第三层嵌套的鼠标点击和鼠标移动样式

		------------------------------*/
		.lowestLevelColor{
			color: black;
			background-color: #f2f2f2;
		}
		// .curriculum-span:hover{
		// 	background-color: #f2f2f2;
		// }
		.curriculumColor{
			background-color: #f2f2f2;
		}
		.curriculum-li:hover{
			background-color: #f2f2f2;
		}
		/*------------------------------

		在后台没有传过来任何数据的时候，显示暂无数据，但凡有一点数据，都会显示数据

		------------------------------*/

		.judgementData{
			width : 100px;
			height : 100px;
			background-color : red;
			margin: 0 auto;
			top : 50%;
			position: fixed;
			left: 0;
			right:0;
		}
		/*------------------------------

		当判断hasWord为true的时候，执行以下的样式

		------------------------------*/
		// .bluish-Style{
		// 	color: #1276eb;
		// 	border: 1px solid #65aafa;
		// 	background-color: #eaf5ff;
		// }
		.bluish-Style:hover{
			background-color: #eaf5ff;
		}
		// .bluish-Styletext{
		// 	color: #1276eb!important;
		// }
		/*-------------靳春野显示页面结束-----------------*/
		.CurriculumOnclick{
			    border: 1px solid #1277eb;
				height: 32px;
				width: auto;
				text-align: center;
				vertical-align: middle;
				line-height: 30px;
				color: #1277eb;
				cursor: pointer;
				border-radius: 20px;
				padding: 0 16px;
				font-size: 14px;
				display: inline-block;
				position: relative;
				margin-bottom: 50px;
				z-index: 10;
		}
		.CurriculumOnclick:hover{
			background: #1277eb;
			color: white;
		}
		
</style>